<template>
  <div class="list-content">
    <div v-show="!dialogFalg">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" @submit.native.prevent>
        <el-form-item>
          <el-input v-model.trim="formInline.name" placeholder="请输入单位名称" @keyup.enter.native="getData(1)" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="form-search-btn" type="primary" @click="getData(1)">查询</el-button>
        </el-form-item>
      </el-form>
      <el-row class="overview-wrap" :gutter="40">
        <el-col :span="12">
          <div class="item-wrap">
            <p class="item-value color-5">{{ staticObj.haveEmergencyPlanUnitNum || 0 }}</p>
            <p class="item-title">具有应急预案的单位总数</p>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="item-wrap">
            <p class="item-value color-6">{{ staticObj.noHaveEmergencyPlanUnitNum || 0}}</p>
            <p class="item-title">不具有应急预案的单位总数</p>
          </div>
        </el-col>
      </el-row>
      <el-table v-loading="loading" :data="tableData" ref="mainTable" style="width: 100%">
        <el-table-column label="序号" type="index" width="50">
        </el-table-column>
        <el-table-column prop="shortName" label="业主单位">
        </el-table-column>
        <el-table-column prop="totalNum" label="应急预案数量">
        </el-table-column>
        <el-table-column label="操作" width="140">
          <template slot-scope="scope">
            <el-button @click="showDetail(scope.$index, scope.row)" type="text" size="small">清单</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background @size-change="sizeChange" @current-change="pageChange" :current-page="formInline.currentPageIndex" :page-sizes="[10, 50, 100]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="formInline.currentPageTotal">
      </el-pagination>
    </div>
    <transition name="el-zoom-in-top">
      <!-- 单个单位预案列表 -->
      <plan-list v-if="dialogFalg" :organizationId="transPageOrgId" :organizationName="transPageOrgName" :hasFather="hasFather" :returnFun="returnFather"></plan-list>
    </transition>
  </div>
</template>

<script>
import { getUnitEmergencyPlan, getCountEmergencyPlanUnit } from '@/api/plan'
import util from '@/utils/util'
import planList from './EmergencyPlanList'

export default {
  name: 'EmergencyPlanUnitList',
  props: ['param'],
  components: {
    planList,
  },
  data() {
    return {
      formInline: {
        name: '',
        currentPageSize: 10,
        currentPageIndex: 1,
        currentPageTotal: 0,
      },
      util: util,
      isMuilUnitUser: this.$store.state.userinfo.isMuilUnitUser,
      accountName: this.$store.state.userinfo.accountName,
      defaultImg: this.GLOBAL.defaultImg,
      tableData: [], //表格数据
      staticObj: {
        haveEmergencyPlanUnitNum: 0,
        noHaveEmergencyPlanUnitNum: 0,
      }, //头部各状态个数统计
      loading: false,
      dialogFalg: false,
      hasFather: true,
      transPageOrgId: '',
      transPageOrgName: '',
    }
  },
  created: function () {
    this.getData()
  },
  methods: {
    getData(_pageIndex) {
      this.getList(_pageIndex)
      this.getStatis()
    },
    sizeChange(_pageSize) {
      //页码切换
      this.getList(1, _pageSize)
    },
    pageChange(_pageIndex) {
      //翻页
      this.getList(_pageIndex)
    },
    getList(_pageIndex, _pageSize) {
      //获取列表
      if (_pageIndex) {
        this.formInline.currentPageIndex = _pageIndex
      }
      if (_pageSize) {
        this.formInline.currentPageSize = _pageSize
      }
      this.loading = true
      getUnitEmergencyPlan({
        queryType: 1,
        name: this.formInline.name.trim(),
        min: 0,
        max: 1000,
        pageIndex: this.formInline.currentPageIndex - 1,
        pageSize: this.formInline.currentPageSize,
      }).then((result) => {
        this.formInline.currentPageTotal = result.total
        this.tableData = result.data
        this.loading = false
      })
    },
    getStatis() {
      //头部统计
      this.staticObj.haveEmergencyPlanUnitNum = 0
      this.staticObj.noHaveEmergencyPlanUnitNum = 0
      getCountEmergencyPlanUnit({
        name: this.formInline.name.trim(),
        min: 0,
        max: 1000,
      }).then((result) => {
        Object.assign(this.staticObj, result.data)
      })
    },
    showDetail(index, row) {
      //展开详情
      if (row) {
        this.transPageOrgId = row.orgId
        this.transPageOrgName = row.shortName
        this.dialogFalg = true
      }
    },
    // 返回父页面（供子组件调用）
    returnFather() {
      this.dialogFalg = false
      this.getData()
    },
  },
}
</script>